<template>

    <div  >





        <el-row style="margin-top: 100px">
            <el-col :span="8" :offset="8"  style="text-align: center; font-size: 20px; font-weight: bold">二次元图片提取器</el-col>
        </el-row>

        <el-row style="margin-top: 50px">
            <el-col :span="8" :offset="8">
                <el-form :model="ruleForm"   label-width="100px" class="demo-ruleForm">
                    <el-form-item label="资源类型" >
                        <el-radio v-model="ruleForm.r18" :label="0">常规资源</el-radio>
                        <el-radio @change="checkIs18" v-model="ruleForm.r18" :label="1">&*R%*18*%</el-radio>
                    </el-form-item>


                    <el-form-item label="获取数量" >
                        <el-select v-model="ruleForm.num" >
                            <el-option label="1" :value="1"></el-option>
                            <el-option label="3" :value="3"></el-option>
                            <el-option label="5" :value="5"></el-option>
                            <el-option label="10" :value="10"></el-option>
                            <el-option label="20" :value="20"></el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item label="资源标签"  >
                        <el-input  v-model.number="ruleForm.tag"  placeholder="如原神"></el-input>
                    </el-form-item>

                    <el-form-item label="图片大小" >
                        <el-select v-model="ruleForm.size" >
                            <el-option label="超大" value="original"></el-option>
                            <el-option label="常规" value="regular"></el-option>
                            <el-option label="小" value="small"></el-option>
                            <el-option label="偏小" value="thumb"></el-option>
                            <el-option label="极小" value="mini"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary"  @click="submitForm('ruleForm')">立即获取</el-button>
                        <el-button type="warning"  @click="removeImage">清空图片</el-button>

                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <div class="demo-image__lazy" style="border: 1px solid black">
            <el-image :title="item.title" v-if="original!=[]" v-for="item in original" :key="item.urls.original" :src="item.urls.original"  lazy></el-image>
            <el-image :title="item.title" v-if="regular!=[]" v-for="item in regular" :key="item.urls.regular" :src="item.urls.regular" lazy></el-image>
            <el-image :title="item.title" v-if="small!=[]" v-for="item in small" :key="item.urls.small" :src="item.urls.small" lazy></el-image>
            <el-image :title="item.title" v-if="thumb!=[]" v-for="item in thumb" :key="item.urls.thumb" :src="item.urls.thumb" lazy></el-image>
            <el-image :title="item.title" v-if="mini!=[]" v-for="item in mini" :key="item.urls.mini" :src="item.urls.mini" lazy></el-image>
        </div>





    </div>


</template>

<script>
    import axios from 'axios'
    export default {
        name: "getImage",
        data(){
            return{
                original:[],//超大
                regular:[],//常规大小
                small:[],//小
                thumb:[],//偏小
                mini:[],//极小
                ruleForm: {
                    r18:0,
                    num:1,
                    tag:'',
                    size:'small',
                }


            }
        },
        methods:{
            removeImage(){
                this.original=[]
                this.regular=[]
                this.small=[]
                this.thumb=[]
                this.mini=[]
            },

            checkIs18(){
                this.$prompt('下方填写你的年龄', '是否已经年满18周岁', {
                    confirmButtonText: '确定',
                    cancelButtonText: '没有',
                    inputPattern: /^\d{1,2}$/,
                    inputErrorMessage: '格式不正确'
                }).then(({ value }) => {
                    if(value<18){
                        this.ruleForm.r18=0
                    }

                });
            },

            submitForm() {

                this.original=[]
                this.regular=[]
                this.small=[]
                this.thumb=[]
                this.mini=[]


                axios({
                    method:'get',
                    url:'http://localhost:80/api/setu/v2',
                    params:this.ruleForm
                }).then(res=>{
                    if(res.data.data.length==0){
                        this.$message.warning("暂且没有你想要的资源,请修改查询条件")
                    }else{

                        this.$message.success("获取成功，请等待加载!")
                        if(this.ruleForm.size=="original"){
                            this.original=res.data.data//超大
                        }else if(this.ruleForm.size=="regular"){
                            this.regular=res.data.data//超大
                        }else if(this.ruleForm.size=="small"){
                            this.small=res.data.data//小
                        }else if(this.ruleForm.size=="thumb"){
                            this.thumb=res.data.data//偏小
                        }else {
                            this.mini=res.data.data//极小
                        }
                    }
                }).catch(error=>{
                    this.$message.error(error)
                });


            }


        }
    }
</script>

<style scoped>


</style>